<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>区域信息维护</el-row>
      <el-row style="margin-top:10px">
        <el-form-item label="" prop="city">
          <el-select v-model="queryParams.city" placeholder="请选择" clearable @change="handleOptions1Change" ref="mySelect1">
            <el-option
              v-for="item in regionOptions1"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="addLevel('1')">新增</el-button>
          <el-button type="danger"  @click="deleteLever1" v-if="false">删除</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="" prop="district">
          <el-select v-model="queryParams.district" placeholder="请选择" clearable @change="handleOptions2Change" ref="mySelect2">
            <el-option
              v-for="item in regionOptions2"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="addLevel('2')">新增</el-button>
          <el-button type="danger"  @click="deleteLever2" v-if="false">删除</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="" prop="street">
          <el-select v-model="queryParams.street" placeholder="请选择" clearable @change="handleOptions3Change" ref="mySelect3">
            <el-option
              v-for="item in regionOptions3"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="addLevel('3')">新增</el-button>
          <el-button type="danger"  @click="deleteLever3" v-if="false">删除</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="" prop="residents">
          <el-select v-model="queryParams.residents" placeholder="请选择" clearable @change="handleOptions4Change" ref="mySelect4">
            <el-option
              v-for="item in regionOptions4"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="addLevel('4')">新增</el-button>
          <el-button type="danger"  @click="deleteLever4" v-if="false">删除</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- 添加或修改区域信息对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="regionRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="父节点层级" prop="level">
          <el-input v-model="form.level" placeholder="请输入父节点层级" readonly/>
        </el-form-item>
        <el-form-item label="上级节点" prop="parentId">
          <el-input v-model="form.parentId" placeholder="请输入父节点" readonly/>
        </el-form-item>
        <el-form-item label="上级节点名称" prop="label">
          <el-input v-model="form.label" placeholder="请输入父节点" readonly/>
        </el-form-item>
        <el-form-item label="区域名称" prop="regionName">
          <el-input v-model="form.regionName" placeholder="请输入区域名称" />
        </el-form-item>
        <el-form-item label="城乡分类代码" prop="classification">
          <el-input v-model="form.classification" placeholder="请输入城乡分类代码" />
        </el-form-item>
        <el-form-item label="行政区域代码" prop="regionCode">
          <el-input v-model="form.regionCode" placeholder="请输入行政区域代码" />
        </el-form-item>
        <el-form-item label="备注" prop="remark" >
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Region">
import { listRegion, getRegion, delRegion, addRegion, updateRegion,listRootNodes, listChildrenNodes, list1Region, list2Region, list3Region, list4Region } from "@/api/ndpf/region";

const { proxy } = getCurrentInstance();
const { c_service_object } = proxy.useDict('c_service_object');

const regionOptions1 = ref([]);
const regionOptions2 = ref([]);
const regionOptions3 = ref([]);
const regionOptions4 = ref([]);
const label1 = ref("");
const label2 = ref("");
const label3 = ref("");
const label4 = ref("");
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const isExpandAll = ref(false);
const refreshTable = ref(true);

const data = reactive({
  form: {},
  queryParams: {
    regionId: null,
    parentId: null,
    city: null,
    district: null,
    street: null,
    residents: null,
  },
  rules: {
    regionName: [
      { required: true, message: "地区名称不能为空", trigger: "blur" }
    ],
    parentId: [
      { required: true, message: "父id不能为空", trigger: "blur" }
    ],
    regionCode: [
      { required: true, message: "行政区域代码不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

// 表单重置
function reset() {
  form.value = {
    regionId: null,
    regionName: null,
    level: null,
    parentId: null,
    ancestors: null,
    classification: null,
    regionCode: null,
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("regionRef");
}


/** 查询区域信息列表 */
async function getList() {
    await listRootNodes().then(response => {
    regionOptions1.value = response.data;
  });
}

/** 查询区域信息下拉树结构 */
function handleOptions1Change(newValue) {
    queryParams.value.district = '';
    queryParams.value.street= '';
    queryParams.value.residents= '';
    regionOptions2.value = [];
    regionOptions3.value = [];
    regionOptions4.value = [];
    queryParams.value.parentId = newValue;
    listChildrenNodes(queryParams.value).then(response => {
    regionOptions2.value = response.data;
    // val 是选中的 regionId
    const selectedOption = regionOptions1.value.find(item => item.regionId === newValue);
    if (selectedOption) {
      label1.value = selectedOption.regionName; // 获取 label
    }
  });
}

/** 查询区域信息下拉树结构 */
function handleOptions2Change(newValue) {
    queryParams.value.street= '';
    queryParams.value.residents= '';
    regionOptions3.value = [];
    regionOptions4.value = [];
    queryParams.value.parentId = newValue;
    listChildrenNodes(queryParams.value).then(response => {
    regionOptions3.value = response.data;
    // val 是选中的 regionId
    const selectedOption = regionOptions2.value.find(item => item.regionId === newValue);
    if (selectedOption) {
      label2.value = selectedOption.regionName; // 获取 label
    }
  });
}

/** 查询区域信息下拉树结构 */
function handleOptions3Change(newValue) {
    queryParams.value.residents= '';
    regionOptions4.value = [];
    queryParams.value.parentId = newValue;
    listChildrenNodes(queryParams.value).then(response => {
    regionOptions4.value = response.data;
    // val 是选中的 regionId
    const selectedOption = regionOptions3.value.find(item => item.regionId === newValue);
    if (selectedOption) {
      label3.value = selectedOption.regionName; // 获取 label
    }
  });
}

function addLevel(level){
  reset();
  if(level == '1'){
    form.value.parentId= '7147be58-1c52-4b28-8234-05f9e99806a5';
    form.value.label = '广西区';
  }else if(level == '2'){
    form.value.parentId= queryParams.value.city;
    form.value.label = label1.value;
  }else if(level == '3'){
    form.value.parentId= queryParams.value.district;
    form.value.label = label2.value;
  }else if(level == '4'){
    form.value.parentId= queryParams.value.street;
    form.value.label = label3.value;
  }
  form.value.level = level;
  open.value = true;
  title.value = "添加区域信息";
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["regionRef"].validate(valid => {
      if (valid) {
        addRegion(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          let level = form.value.level;
          let parentId = form.value.parentId;
          queryParams.value.parentId = parentId;
          listChildrenNodes(queryParams.value).then(response => {
            if(level == 1){
              regionOptions1.value = response.data;
            }else if(level == 2){
              regionOptions2.value = response.data;
            }else if(level == 3){
              regionOptions3.value = response.data;
            }else if(level == 4){
              regionOptions4.value = response.data;
            }
          });
        });
      }
  });
}
getList();
</script>
